<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>KKTOKEN</title>
		<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		<link rel="stylesheet" type="text/css" href="../css/index1.css" />
		<link rel="stylesheet" type="text/css" href="../common/highlight.min.css" media="screen">
		<!--<link rel="stylesheet" type="text/css" href="../common/common.css" media="screen">-->
		<!--<link rel="stylesheet" type="text/css" href="../pagination.css" media="screen">-->
	</head>

	<body>
		<div class="wrap">
			<div class="container">
				<!--导航栏-->
				<header>
					<div class="content">
						<div class="headerLogo">
							<img class="logoimg" src="../img/logo.png" alt="logo" />
							<img class="logofont" src="../img/font_logo.png" alt="logofont" />
						</div>
						<ul class="headerNav">
							<li class="active" style="opacity: 1.0;">
								<div>自选</div>
								<div class="optional">

								</div>
							</li>
							<li class="active">
								<div>市值</div>
								<div class="market">

								</div>
							</li>
							<li class="active jys" style="position: relative;">
								<div>交易所</div>
								<div class="bourse">
									<ul style="color: #000;">
										<li>Binance</li>
										<li>Bthumb</li>
										<li>OKEX</li>
										<li>Upbit</li>
										<li>Coinnext</li>
										<li>Binance</li>
										<li>比特儿海外</li>
										<li>BCoinnext</li>
										<li>币安网</li>
									</ul>
									<span class="jys_arro"></span>
								</div>
								</span>

						</ul>
						<div class="headerAdv">
							<img src="../img/home_ad_img.jpg" alt="navAdv" />
						</div>
					</div>
				</header>
				<!--内容区-->
				<section>
					<div class="content center" style="background:initial">
						<!--内容区，顶部导航-->
						<div class="top_content">
							<span class="left_btn"></span>
							<ul class="menu">
								<li>
									<a href="../index.html" style="text-decoration: none;color: inherit;">自选</a>
								</li>
								<li>市值</li>
								<li class="selc">
									<a href="trade.html" style="text-decoration: none;color: inherit;">Binance</a>
								</li>
								<li>Bithumb</li>
								<li>OKEX</li>
								<li>火币Pro</li>
								<li>Bitifinex</li>
								<li>火币Pro</li>
								<li>Binance</li>
								<li>OKEX</li>
								<li>火币Pro</li>
								<li>Binance</li>
							</ul>
							<span class="right_btn"></span>
						</div>
						<!--内容区，左大块列表-->
						<div class="left_box" style="width: 860px; height: auto;min-height:750px;background-color: inherit;float: left;">
							<div class="left_content" style="float: none;">

								<div class="list_header">
									<div style="height: 30px;margin: 15px 5px 15px 0;">
										<div class="list_search">
											<input class="search_ipt" type="text" placeholder="请输入关键词过滤" />
											<span class="search_btn">
											<img src="../img/nav_search@2x.png"/>
										</span>
										</div>
									</div>

									<ul class="list_title">
										<li class="tradesort">#</li>
										<li class="name">交易对</li>
										<li class="price">最新价</li>
										<li class="risefall">涨跌(24h)</li>
										<li class="turnval">成交额(24h)</li>
										<li class="freeval">24小时最高</li>
										<li class="trend" style="margin-right: 20px;">24小时最低</li>
									</ul>
								</div>

								<ul class="list_content">
									<li class="list_data">
										<ul class="list_line">
											<li class="tradesort"><img src="../img/big_colect.png" /></li>
											<li class="name">
												<span><img src="../img/big_colect.png"/></span>
												<a href="../###">
													<span>MIOTA-艾欧塔</span>
												</a>
											</li>
											<li class="price">￥863.642</li>
											<li class="risefall" style="color: #24AB00;">13.46%</li>
											<li class="turnval">￥153.018万</li>
											<li class="freeval">￥1789.074亿</li>
											<li class="trend" style="margin-right: 20px;">0.00678926</li>
										</ul>
									</li>								
								</ul>

							</div>
							<div class="" style="width: 840px; height: 34px;">
								<div class="pageList">
									<!--<a href="../#" class="btn btn-white">&emsp;</a>-->
									<!--<a href="../#" class="btn btn-white"><img src="../img/right_arrow.png"/></a>
									<a href="../#" class="btn btn-white active">1</a>
									<a class="btn btn-white" href="..//exchange/list_2.html">2</a>
									<a class="btn btn-white" href="..//exchange/list_3.html">3</a>
									<a class="btn btn-white" href="..//exchange/list_4.html">4</a>
									<a class="btn btn-white" href="..//exchange/list_5.html">5</a>
									<a href="../#" class="btn btn-white">...</a>
									<a class="btn btn-white" href="..//exchange/list_15.html">15</a>-->
									<!--<a class="btn btn-white" href="..//exchange/list_2.html">&emsp;</a>-->
									<!--<a href="../#" class="btn btn-white"><img src="../img/left_arrow.png"/></a>-->

								</div>
							</div>

						</div>

						<div class="right_content">
							<div class="right_top">
								<p>
									<a href="../html/notice.html">交易所公告</a>
								</p>
								<div class="listBox" id="artList" style="width: 100%;height: auto;overflow: hidden;">
									<ul class="notice_list">
										<li class="list_item">
											<span class="news_title"> aaaaa在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
									</ul>

									<ul class="notice_list">
										<li class="list_item">
											<span class="news_title">bbb在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">在过去的24小时内，以太坊网络在开盘咋咋咋在</span>
											<span class="news_time">01-16  15:30</span>
										</li>
										<li class="list_item">
											<span class="news_title">醉卧沙场君莫笑，古来征战几人回。葡萄美酒夜光杯，欲饮琵琶马上催</span>
											<span class="news_time">01-16  15:30</span>
										</li>
									</ul>
	

								</div>
							</div>
							<div class="right_bottom">
								<p><span class="rise selected">涨幅榜</span><span class="fall">跌幅榜</span><span class="more_btn"></span></p>

								<div class="range_pad">
									<p class="range_notice">24小時漲幅超過500萬</p>
									<ul class="range_title">
										<li class="btc_rank" style="color: #000000;">排行</li>
										<li class="btc_sort">名称</li>
										<li class="btc_value">价格</li>
										<li class="btc_percent">涨幅</li>
									</ul>

									<ul class="range_lists">
										<li class="range_line">
											<ul>
												<li class="btc_rank rank1">1</li>
												<li class="btc_sort">
													<span class="btc_icon"></span>
													<span id="btc_name">BTC</span>
												</li>
												<li class="btc_value">￥1054.29</li>
												<li class="btc_percent percent_rise">+22.89%</li>
											</ul>
										</li>

										<li class="range_line">
											<ul>
												<li class="btc_rank rank2">2</li>
												<li class="btc_sort">
													<span class="btc_icon"></span>
													<span id="btc_name">MIOTA</span>
												</li>
												<li class="btc_value">￥1054.29</li>
												<li class="btc_percent percent_rise">+22.89%</li>
											</ul>
										</li>

										<li class="range_line">
											<ul>
												<li class="btc_rank rank3">3</li>
												<li class="btc_sort">
													<span class="btc_icon"></span>
													<span id="btc_name">MIOTA</span>
												</li>
												<li class="btc_value">￥1054.29</li>
												<li class="btc_percent percent_fall">+22.89%</li>
											</ul>
										</li>

										<li class="range_line">
											<ul>
												<li class="btc_rank rank_x">4</li>
												<li class="btc_sort">
													<span class="btc_icon"></span>
													<span id="btc_name">MIOTA</span>
												</li>
												<li class="btc_value">￥1054.29</li>
												<li class="btc_percent percent_rise">+22.89%</li>
											</ul>
										</li>

										<li class="range_line">
											<ul>
												<li class="btc_rank rank_x">5</li>
												<li class="btc_sort">
													<span class="btc_icon"></span>
													<span id="btc_name">MIOTA</span>
												</li>
												<li class="btc_value">￥1054.29</li>
												<li class="btc_percent percent_rise">+22.89%</li>
											</ul>
										</li>

										<li class="range_line">
											<ul>
												<li class="btc_rank rank_x">16</li>
												<li class="btc_sort">
													<span class="btc_icon"></span>
													<span id="btc_name">MIOTA</span>
												</li>
												<li class="btc_value">￥1054.29</li>
												<li class="btc_percent percent_fall">+22.89%</li>
											</ul>
										</li>

									</ul>
								</div>
							</div>
						</div>
					</div>
				</section>

				<!--尾部-->
				<footer>
					<div class="content">
						<p class="copyright">copyright © 2018 KKTOKEN，粤ICP备17140751号-1·Powered By Weilaicaij</p>
						<ul class="linksTo">
							<li>友情链接:</li>
							<li>
								<a href="http://www.8btc.com/">巴比特</a>
							</li>
							<li>
								<a href="http://www.jinse.com/">金色财经</a>
							</li>
							<li>
								<a href="../">BTC123</a>
							</li>
							<li>
								<a href="https://www.btc123.com/">铅笔</a>
							</li>
							<li>
								<a href="https://www.coindesk.com/">coindesk</a>
							</li>
							<li>
								<a href="http://www.qukuaiwang.com.cn/">区块链导航</a>
							</li>
							<li>
								<a href="../">区块链</a>
							</li>
							<li>
								<a href="https://www.7234.cn/">链世界</a>
							</li>
							<li>
								<a href="https://www.feixiaohao.com/">非小号</a>
							</li>
							<li>
								<a href="https://www.binance.com/">币安</a>
							</li>
							<li>
								<a href="https://www.coingogo.com/">币源社区</a>
							</li>
							<li>
								<a href="http://bitkan.com/">币看</a>
							</li>
							<li>
								<a href="https://www.coolcoin.com/">酷币</a>
							</li>
							<li>
								<a href="https://www.btc98.com/">比特酒吧</a>
							</li>
							<li>
								<a href="http://sl.vc/">共享财经</a>
							</li>
							<li>
								<a href="http://www.chainfor.com/">链向财经</a>
							</li>
							<li>
								<a href="http://jgy.com/">九个亿财经</a>
							</li>
						</ul>
					</div>
				</footer>
			</div>
		</div>
	</body>
	<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var get_url = 'http://api.btcdata.top/api/api_kktoken';
		
		//右侧公告		加载涨跌数据后循环列表100条	
		$.get(get_url + '/notice?page_size=20', function(res) {
			//console.log(res.data.lists[1].exchange_name);
			var num = 20;
			for(var i = 0; i < num; i++) {
				var homeurls = res.data.lists[i].title_url;
				var hometitle = res.data.lists[i].title_content_translate;
				var hometime = res.data.lists[i].title_time;
				hometime = hometime.slice(6, 16);
				$('#no1').append('<li class="list_item"><a href="' + homeurls + '">' +
					'<span class="news_title">' + hometitle + '</span>' +
					'<span class="news_time">' + hometime + '</span></a></li>');
			};

		}, 'json');

		//点击事件切换涨跌幅视图
		//预先默认涨幅表为涨幅显示
		var changes = "performer";

		$("#riseBtn").click(function() {
			changes = 'performer';
			$("#changesPad").empty();
			ajaxData(changes);
			$(this).addClass("selected");
			$("#fallBtn").removeClass("selected");
		})

		$("#fallBtn").click(function() {
			changes = 'drop';
			$("#changesPad").empty();
			ajaxData(changes);
			$(this).addClass("selected");
			$("#riseBtn").removeClass("selected");

		})

		function ajaxData() {

			$.get('http://192.168.31.143/api/api_kktoken/' + changes + '?page_size=20', function(rangedata) {
				//				console.log(typeof(rangedata));
				//				console.log(rangedata.data);
				//生成列表
				var rangenum = 20;
				for(var i = 0; i < rangenum; i++) {
					var homeurls = rangedata.data.lists[i].title_url;
					var rangeName = rangedata.data.lists[i].coin_symbol;
					var rangeImg = rangedata.data.lists[i].icon_url;
					var rangeVal = changeTwoDecimal(rangedata.data.lists[i].price_cny);
					var rangePer = rangedata.data.lists[i].percent_change24h;
					if(rangePer > 0) {
						rangePer = "+" + changeTwoDecimal(rangePer) + "%"
					} else {
						rangePer = changeTwoDecimal(rangePer) + "%";
					};
					if(rangeImg == "" || rangeImg == null) {
						rangeImg = "img/home_coin@2x.png"
					}
					var ranges = (i + 1)

					$('.rise_range_lists').append('<li class="range_line">' +
						'<ul>' +
						'<li class="btc_rank rank_x" id="r_' + ranges + '">' + ranges + '</li>' +
						'<li class="btc_sort">' +
						'<img class="btc_icon" src=' + rangeImg + ' />' +
						'<span id="btc_name">' + rangeName + '</span>' +
						'</li>' +
						'<li class="btc_value">￥' + rangeVal + '</li>' +
						'<li class="btc_percent percent_rise">' + rangePer + '</li>' +
						'</ul>' +
						'</li>');
					//			判斷前三名排序
					if(ranges == 1) {
						$("#r_1").addClass("rank1").removeClass("rank_x");
					} else if(ranges == 2) {
						$("#r_2").addClass("rank2").removeClass("rank_x");
					} else if(ranges == 3) {
						$("#r_3").addClass("rank3").removeClass("rank_x");
					}
					//					判断涨跌,更改颜色
					if(changes == "drop") {
						$("#changesPad .range_line .btc_percent").removeClass("percent_rise");
						$("#changesPad .range_line .btc_percent").addClass("percent_fall")
					} else {
						$("#changesPad .range_line .btc_percent").removeClass("percent_fall");
						$("#changesPad .range_line .btc_percent").addClass("percent_rise")
					}
				};
			}, 'json');

		}
		
		
		$('.pageList').pagination({
			mode: 'fixed',
			showData: 10,
			totalData: 200,
			//  showData: 15,
			//  coping: true
		});

		//列表前往详情页

		$(".list_data").click(function() {

			//			window.location.href="exchPairDetail.html"
			window.open("exchPairDetail.html");
		});

		$(".more_btn").click(function() {

			window.location.href = "chg.html"
		});

		//			最新公告滚动
		var mun = 0;
		var scroll1 = null;

		function scroll() {
			scroll1 = setInterval(function() {
				mun--;
				$('.notice_list').eq(0).css('margin-top', mun + 'px');
				if(mun == -250) {
					$('.notice_list').eq(0).appendTo('#artList');
					$('.notice_list').css('margin-top', '0')
					setTimeout(function() {
						mun = 0;
						clearInterval(scroll1);
						scroll()
					}, 75)
				}
			}, 80)
		}
		scroll();
		$('.notice_list').mouseover(function() {
			clearInterval(scroll1);
		})
		$('.notice_list').mouseout(function() {
			scroll()
		})
	</script>

</html>